import { Model } from "./model";

export const Component = {
    //主内容
    contentMenu:(data)=>{
        let Render = "";
        let all = "";
        data.forEach((value,index,array)=>{
            let image = "";
            let show = "";
            let content = "";
            if(value.image){
                image = `<img class="content-image" src="${value.image}">`
            }
            if(value.content.length>140){
                show = `<a class="show-all" onclick="${Model.setContent(index,value)}">显示全部</a>`;
                content = value.content.substring(0,140) + "...";
            }
            Render += `
                <ul class="x-content">
                    <li class="content-title">${value.title}</li><br>
                    <li class="content-author">${value.author}</li><br>                    
                    <li class="content-content">${image}<span class="content-text">${content||value.content}</span>${show}</li><br>
                </ul>
                <div class="content-menu">
                    <span class="content-comment-length">${value.comment.length}条评论</span>
                    <div class="show-menu">
                    </div>
                </div>
                `;
        });
        return Render;
    },
    //提示框
    CommentBox:(data)=>{
        let render = "";
        if(data){
            data.forEach((value,index,array)=>{
                let reply = "";
                if(value.reply){
                    reply = `<span><span class="comment-reply">回复</span><span class="blue">${value.reply}</span></span>`;
                }
                render += `<ul class="x-comment">
                <li class="comment-author"><span class="blue">${value.author}</span>${reply}</li>
                <li class="comment-content">${value.content}</li>
                <li class="comment-date">${value.date}</li>
            </ul>`;
            });
        }else{
            render = "没有评论";
        }
        let comment = `<div class="x-comment">
            <div class="comment-main">
                <div class="comment-triangle">
                <span></span>
                </div>${render}
                    <div class="comment-write">
                        <input class="write" placeholder="写下评论" type="text">
                        <button class="write-determine">评论</button><button class="write-cancel">取消</button>
                    </div>
                </div>
            </div>
        </div>`;
        return comment;
    }
};